<template>
	<view class="order">
		<scroll-view class="scroll-view" scroll-x="true">
			<view v-for="(item,index) in tabs" :key="index" @click="changeTabs(item)" :class="item.key === active?'.scroll-item-active':'scroll-item'">{{item.text}}</view>
		</scroll-view>
		<scroll-view class="scroll-view2" scroll-y="true"  @scrolltolower="isDown" show-scrollbar="false">
			<view v-for="(item,index) in list" :key="index" class="orderItem" @click="toDetail(item)" v-if="list.length>0">
				<view class="number" @click="toDetail(item)">
					<view>订单号：{{item.order_no}}</view>
					<view>{{getStatus(item.status,item.refund_status)}}</view>
				</view>
				<view class="goodsList">
					<view v-for="(demo,idx) in  item.detail" :key="idx" class="goodsItem">
						<view style="display: flex;">
							<img style="width: 50px;height: 50px;border-radius: 4px;margin-right: 10px;" :src="demo?.commodity_pic" alt="">
							<view style="height: 50px;color: #7c7c7c;width: 200px;">
								<view class="nameText">{{demo.commodity_name}}</view>
								<view style="margin-top: 5px;">×{{demo.commodity_num}}</view>
							</view>
						</view>
						<view style="font-weight: bold;">￥{{demo?.unit_fee}}</view>
					</view>
				</view>
				<view class="toPay" v-if="item.status === 0">
					<view>
						<view class="payBtn" @click="toPay(item)">付款</view>
						<view>请在30分钟之内完成付款</view>
					</view>
					<view style="font-weight: bold;font-size: 14px;">￥{{item.total_price}}</view>
				</view>
				<view class="toPay" v-if="item.status === 2">
					<view>
						<view>请在{{removeLastThreeChars(item.timeout_time)}}之前将衣物送到门店</view>
					</view>
					<view style="font-weight: bold;font-size: 14px;">￥{{item.total_price}}</view>
				</view>
				<view class="toPay" v-if="item.status === 1 && item.pickup_at_left">
					<view>
						<view style="width: 90%;word-break: break-all;white-space: normal;">将于{{removeLastThreeChars(item.pickup_at_left)}} - {{removeLastThreeChars(item.pickup_at_right)}}上门取件</view>
					</view>
					<view style="font-weight: bold;font-size: 14px;">￥{{item.total_price}}</view>
				</view>
				<view class="toPay" v-if="item.status === 4 && !item.transfer_user">
					<view>
						<view>衣物将由快递寄送至洗衣工厂完成清洗</view>
					</view>
					<view style="font-weight: bold;font-size: 14px;">￥{{item.total_price}}</view>
				</view>
				<view class="toPay" v-if="item.status === 4 && item.transfer_user">
					<view>
						
					</view>
					<view style="font-weight: bold;font-size: 14px;">￥{{item.total_price}}</view>
				</view>
		<!-- 		<view class="toPay" v-if="item.status === 12 || item.status === 13">
					<view>
						<view v-if="item.status === 12">请在{{item.timeout_time}}之前将衣物送到门店</view>
					</view>
					<view style="font-weight: bold;">￥{{item.total_price}}</view>
				</view> -->
				<view class="toPay" v-if="item.status === 11">
					<view>
						<view>衣物清洗完成，请到门店自行取件</view>
					</view>
					<view style="font-weight: bold;font-size: 14px;">￥{{item.total_price}}</view>
				</view>
				<view class="toPay" v-if="item.status === 14">
					<view>
						<view class="payBtn" v-if="!item.refund_status" @click.stop="submitReptOrder(item)">确认收货</view>
					</view>
					<view style="font-weight: bold;font-size: 14px;">￥{{item.total_price}}</view>
				</view>
				<view class="toPay" v-if="[6,7].indexOf(item.status)>=0">
					<view>
						<view style="display: flex;align-items: center;"> <img style="width: 16px;height: 17px;margin-right: 8px;" src="@/static/washing.png" alt="">洗涤状态：正在进行   {{item.wash_sub_name}}</view>
					</view>
					<view style="font-weight: bold;font-size: 14px;">￥{{item.total_price}}</view>
				</view>
				<view class="toPay"v-if="[8,9,10].indexOf(item.status)>=0">
					<view>
						<!-- <view class="payBtn" @click="submitReptOrder(item)">确认收货</view> -->
						<!-- <view style="display: flex;align-items: center;">衣物清洗完成，将由快递或门店送回</view> -->
					</view>
					<view style="font-weight: bold;font-size: 14px;">￥{{item.total_price}}</view>
				</view>
			</view>
			<view v-else class="kong">
				<img class="img" style="width: 50px;height: 50px;" src="@/static/kong.png" alt="">
				<view>暂无相关订单~</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import { orderList, orderPay, reptOrder } from '@/api/home.js'
	export default{
		data() {
			return {
				tabs:[
					{key:0,text:'全部'},
					{key:1,text:'待付款'},
					{key:2,text:'待清洗'},
					{key:3,text:'清洗中'},
					{key:4,text:'待收件'},
					{key:5,text:'已取消'},
					{key:6,text:'已完成'},
					{key:7,text:'退款/售后'},
				],
				active: 0,
				total:0,
				page:1,
				pageSize:10,
				list:[]
			}
		},
		onLoad() {
			uni.$on('refreshPage',()=>{
				this.getList()
			})
		},
		onShow() {
			this.getList()
		},
		methods:{
			isDown() {
				this.page += 1
				this.getList()
			},
			getStatus(key,refund){
				if(refund) return '退款/售后'
				let list = [
					{ key:0, text:'待付款'},
					{ key:1, text:'待清洗'},
					{ key:2, text:'待清洗'},
					{ key:3, text:'待清洗'},
					{ key:4, text:'待清洗'},
					{ key:5, text:'待清洗'},
					{ key:6, text:'清洗中'},
					{ key:7, text:'清洗中'},
					{ key:8, text:'待收件'},
					{ key:9, text:'待收件'},
					{ key:10, text:'待收件'},
					{ key:11, text:'待收件'},
					{ key:12, text:'已完成'},
					{ key:13, text:'已取消'},
					{ key:14, text:'待收件'},
				]
				return list.find(item=>{ return item.key === key })?.text
			},
			submitReptOrder(item){
				let that = this
				uni.showModal({
					title: '',
					content:'确认收货？',
					cancelText:"取消",
					confirmText:"确定",
					success(res) {
						if (res.confirm) {
						  reptOrder({orderNo:item.order_no}).then(rs=>{
							if(rs.code === 200) {
								that.getList()
								uni.showToast({
									title: rs.message,
									icon:'none'
								})
							}
						  })
						}	
					}
				})
			},
			removeLastThreeChars(str) {
			  return str.slice(0, -3);
			},
			changeTabs(item){
				this.list = []
				this.page = 1
				this.active = item.key
				this.getList()
			},
			toDetail(item){
				uni.navigateTo({
					url:'/pages/orderDetail/index?data='+JSON.stringify(item)
				})
			},
			getList(){
				orderList({queryType:this.active,page:this.page,pageSize:this.pageSize}).then(res=>{
					if(this.page !== 1) {
						res.data.items.map(item=>{
							let flag = this.list.findIndex(demo=>{return demo.id === item.id})
							if(flag >=0){
								this.list[flag] = item
							}else{
								this.list.push(item)
							}
						})
					}else{
						this.list = res.data.items
					}
				})
			},
			toPay(item){
				uni.navigateTo({
					url:'/pages/orderDetail/index?data='+JSON.stringify(item)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	// 隐藏滚动条 vue2写法
	/deep/ ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
	.nameText{
		width: 100%;
		overflow:hidden;//超出的隐藏
		text-overflow:ellipsis;//省略号
		white-space:nowrap;//强制一行显示
	}
	.toPay{
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		margin-top: 10px;
		.payBtn{
			display: inline-block;
			border: 1px solid #2c6cf4;
			color: #2c6cf4;
			padding: 4px 10px;
			border-radius: 4px;
			margin-bottom: 10px;
		}
	}
	.goodsList{
		background-color: #fff;
		border-radius: 4px;
		padding: 0 0 15px;
		margin-top: 10px;
		font-size: 14px;
		display: flow-root;
		.goodsItem{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f2f2f2;
			padding-bottom: 15px;
			margin-top: 15px;
			
		}
	}
	.number{
		font-size: 12px;
		display: flex;
		justify-content: space-between;
	}
	.orderItem{
		background-color: #fff;
		border-radius: 4px;
		padding: 10px;
		box-sizing: border-box;
		margin-bottom: 10px;
	}
	.scroll-view2 {
	  white-space: nowrap;
	  width: 100%;
	  padding: 10px 10px 0;
	  box-sizing: border-box;
	  height: calc(100vh - 45px);
	}
	.scroll-view2::-webkit-scrollbar{
		display: none;
	}
	.scroll-view {
	  height: 40px;
	  white-space: nowrap;
	  width: 100%;
	  border-top: 1px solid #f3f3f3;
	  border-bottom: 1px solid #f3f3f3;
	  background-color: #fff;
	}
	.scroll-item {
	  font-size: 12px;
	  display: inline-block;
	  padding: 10px 15px;
	  text-align: center;
	  box-sizing: border-box;  
	}
	.scroll-item-active{
		font-size: 12px;
		display: inline-block;
		padding: 10px 15px;
		text-align: center;
		box-sizing: border-box;  
		color: #2c6cf4;
		border-bottom: 2px solid #2c6cf4;
	}
</style>